import {useEffect, useState} from "react";
import {Table} from "antd";
import {apiGetJournal} from "@/common/apis/journal";
import {IPageResponse, IParam, PageInfo} from "@/common/common";
import {ColumnsType} from "antd/lib/table";
import './index.scss'

const Journal = () => {

  const [params, setParams] = useState<IParam>({page: 1, size: 10});
  const [pageResponse, setPageResponse] = useState<IPageResponse<any>>({pageInfo: {page: 1, size: 10, total: 0}})

  useEffect(() => {
    getJournalList();
  }, [params]);

  const getJournalList = async () => {
    const res = await apiGetJournal(params || {});
    if (res.code === 0) {
      setPageResponse(res)
    }
  }

  const onChangePage = (page: PageInfo) => {
    setParams({...params, ...page})
  }

  const columns: ColumnsType<any> = [
    {
      title: "登陆ip",
      key: "ipAddress",
      dataIndex: "ipAddress",
      align: "center",
      width: 150,
    },
    {
      title: "操作类型",
      dataIndex: "type",
      key: "type",
      align: "center",
      render: (text: any, record: any) => {
        return text;
      },
    },
    {
      title: "操作内容",
      dataIndex: "content",
      key: "content",
      // width: 500,
      align: "center",
      ellipsis: true,
    },
    {
      title: "操作时间",
      dataIndex: "createAt",
      align: "center",
      key: "createAt",
    }
  ]

  return (
    <div className="journal">
      <Table
        rowKey={"id"}
        columns={columns}
        dataSource={pageResponse.data || []}
        pagination={{
          current: pageResponse.pageInfo.page || 0,
          pageSize: pageResponse.pageInfo.size || 10,
          showQuickJumper: true,
          showSizeChanger: true,
          pageSizeOptions: ["5", "10", "15", "20"],
          total: pageResponse.pageInfo.total || 0,
          showTotal: (total) => `共 ${total} 条`,
          onChange: (pageNo, pageSize) => {
            onChangePage({page: pageNo, size: pageSize})
          }
        }}
      />
    </div>
  )
}

export default Journal
